<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="echarts" :prop="options" :change:prop="gaugeChart.updateEcharts" id="gaugeChart">
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {
					series: [{
						type: 'gauge',
						startAngle: 240,
						endAngle: -60,
						min: 0,
						max: 20,
						splitNumber: 5,
						radius: '100%',
						center: ['50%', '50%'],
						axisLine: {
							lineStyle: {
								width: 30,
								color: [
									[0.15, '#28a745'], // 保守
									[0.3, '#17a2b8'], // 稳健
									[0.45, '#ffc107'], // 平衡
									[0.6, '#fd7e14'], // 进取
									[1, '#dc3545'] // 激进
								]
							}
						},
						pointer: {
							icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
							length: '15%',
							width: 20,
							offsetCenter: [0, '-20%'],
							itemStyle: {
								color: 'auto'
							}
						},
						axisTick: {
							length: 12,
							lineStyle: {
								color: 'auto',
								width: 1
							}
						},
						splitLine: {
							length: 18,
							lineStyle: {
								color: 'auto',
								width: 2
							}
						},
						axisLabel: {
							color: '#666',
							fontSize: 14,
							distance: 35,
							formatter: (value) => {
								if (value <= 3) return '保守';
								else if (value <= 6) return '稳健';
								else if (value <= 9) return '平衡';
								else if (value <= 12) return '进取';
								else return '激进';
							}
						},
						title: {
							offsetCenter: [0, '-20%'],
							fontSize: 16
						},
						detail: {
							fontSize: 28,
							offsetCenter: [0, '0%'],
							valueAnimation: true,
							formatter: '{value}',
							color: 'auto'
						},
						data: [{
							value: this.riskPreference?.score || 0,
							// name: '风险评分'
						}]
					}]
				}
			}
		},
		props: ['riskPreference'],
		methods: {
			
		}
	}
</script>

<script module="gaugeChart" lang="renderjs">
	import * as echarts from 'echarts';
	export default {
		mounted() {
			let that = this;
			// 通过nextTick异步画图
			this.$nextTick(() => {
				that.initEcharts()
			});
		},
		methods: {
			initEcharts() {
				this.myChart = echarts.init(document.getElementById('gaugeChart'))
				this.myChart.setOption(this.options);
				window.addEventListener('resize', () => {
					this.myChart.resize()
				});
			},
			// 监听配置数据变化，并重新渲染
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				if (this.myChart) {
					this.myChart.setOption(newValue);
				}
			},
		},
	}
</script>

<style scoped>
	.echarts {
		width: 100%;
		height: 500rpx;
	}
</style>